<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {Search} from "@element-plus/icons-vue";
import {keywordSearch} from "@/api/dataPreprocessing/index.js";
import {isLegalNum} from "@/utils/isLegal.js";

const algorithmChoices = ref('3')
const algorithms = [
  { value: '1', label: 'APDplat算法' },
  { value: '2', label: 'HanLP算法' },
  { value: '3', label: 'ansj算法' }
]
const consequences = ref(null)
//  consequences = [
// {
//    "seedWord": "华硕",
//     "keywords": [
//        {
//          "midWord": "笔记本",
//          "word": "电脑",
//          "comp": 0.08163265306122448
//         },
//     ]
// },
// ]
// consequence是一个数组，数组元素是匿名的类，这个类有两个成员，一个是字符串成员seedWord，一个是数组成员keywords。
// 数组成员keywords的元素是另一个匿名类，这个匿名类有三个成员
const inputValue1 = ref('')
const inputValue2 = ref('')
const splitResult = ref([])
const loading = ref(false)
// 遍历数据并格式化 comp，保留4位小数
function formatComp(data) {
  return data.map(seed => {
    seed.keywords = seed.keywords.map(keyword => {
      keyword.comp = parseFloat(keyword.comp.toFixed(4));
      return keyword;
    });
    return seed;
  });
}
//搜索函数
function handleSearch(){
  if (!inputValue1.value.trim() || !isLegalNum(inputValue2.value.trim())) {
    ElMessage.warning('请输入有效值！！！');
    console.log(inputValue1.value.trim())
    console.log(inputValue2.value.trim())
  }
  else {
    consequences.value = null
    loading.value = true//开始加载
    splitResult.value = inputValue1.value.split(' ').filter(Boolean); // 过滤掉空字符串
    const combinedData = {words: splitResult.value, num: inputValue2.value.trim(),choice:algorithmChoices.value}
    keywordSearch(combinedData).then(res => {//发送请求并获取返回结果
      console.log(res)
      loading.value = false//结束加载
      consequences.value = formatComp(res.data)
    })
    console.log(combinedData)
  }
}


</script>

<template>
  <div class="view-container">

    <div class="input-container">
      <el-input class="input1" v-model="inputValue1" placeholder="请输入种子关键词(关键词之间用空格隔开)" @keyup.enter="handleSearch"/>
      <el-input class="input2" v-model="inputValue2" placeholder="请输入竞争关键词的个数(1-20)" @keyup.enter="handleSearch"/>
      <el-select class="selector" v-model="algorithmChoices" placeholder="请选择算法">
        <el-option
            v-for="item in algorithms"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="handleSearch" ><el-icon><Search /></el-icon></el-button>
    </div>

    <div class="show-card-grandparent">
      <div v-if="loading" class="overlay loading-message"></div>
      <div v-if="!consequences && !loading" class="overlay no-data-message">暂无数据...</div>
      <div class="show-card-parent">
        <el-card v-for="(consequence, index) in consequences" :key="index" class="show-card-child">
          <template #header class="card-header">
            <span>
              <el-text style="font-weight: bold">种子关键词: </el-text>
               <el-text type="warning">{{ consequence.seedWord }}</el-text>
            </span>
          </template>
          <div class="card-body">
            <el-table :data="consequence.keywords" style="width: 100%" >
              <el-table-column prop="midWord" label="中间关键词" ></el-table-column>
              <el-table-column prop="word" label="竞争关键词" ></el-table-column>
              <el-table-column prop="comp" label="竞争度" ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>

  </div>
</template>

<style scoped>
.view-container{
  padding-top: 50px;
  margin-right: 10%;
  width: 90%;
  overflow: hidden;
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直堆叠子组件 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐（可选） */
}
.input-container{
  width: 50%;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.input1{
  width: 100%; /* 子组件的宽度为父组件宽度的一半 */
  flex: 2;
  margin:0
}
.input2{
  width: 100%; /* 子组件的宽度为父组件宽度的一半 */
  flex: 1.5;
  margin:0
}
.selector{
  width: 100%; /* 子组件的宽度为父组件宽度的一半 */
  flex: 0.8;
  margin:0
}
.show-card-grandparent{
  width: 90%;
}
.show-card-parent {
  position: relative;
  z-index: 1; /* 确保卡片内容在消息之上 */
  display: grid;
  grid-template-columns: 50% 50%; /* 每行两列 */
  gap: 1rem; /* 子组件之间的间距 */

  justify-items: center; /* 水平居中对齐 */
  width: 90%;
  margin: 45px auto;
  overflow-x: hidden;
}
.overlay {
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: #999;
  z-index: 2; /* 确保消息在卡片之上 */
  margin-top: 30vh;
}

.show-card-child {
  overflow: auto;
  margin-top: 10px; /* 子组件之间的间距 */
  margin-bottom: 15px; /* 子组件之间的间距 */
  box-sizing: border-box; /* 包含内边距和边框 */
  width: 80%;
  height: 250px;
}

.loading-message{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* 确保加载图标在最上层 */
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>